<template>
    <!-- gutter实际就是padding-left和padding-right 这俩各占一半 -->
    <!-- span来分，一共有24个值,span为数值,offset为百分比 -->
    <!-- offset与span相近，但是只有left间隔,left会空出来，span不会 -->
    <h1>布局</h1>
    <el-row :gutter="20">
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="3">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="3" :offset="3">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="3" :offset="2">

        </el-col>

    </el-row>
    <!-- justify为按照什么排序 [center,end,space-between,space-around,space-evenly] -->
    <el-row class="row-bg" justify="center">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="6" :offset="2">
            <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
        </el-col>
    </el-row>
    <h1>文字</h1>
    <el-row class="row-bg">
        <!-- primary,success,info,warning,danger -->
        <el-col :span="6">
            <el-text class="mx-1" size="large" type="primary">primary(large)</el-text>
            <el-text size="small" type="success">success(small)</el-text>
            <el-text size="large" type="info">info</el-text>
            <el-text size="large" type="warning">warning</el-text>
            <el-text size="large" type="danger">danger</el-text>
            <el-text line-clamp="2">
                The -webkit-line-clamp CSS property<br />
                allows limiting of the contents of<br />
                a block to the specified number of lines.
            </el-text>
        </el-col>
        <el-col :span="9" :offset="3">
            <el-space direction="vertical">
                <el-text>tag用来重写标签，p就是p标签</el-text>
                <el-text tag="a">This is a paragraph.</el-text>
                <el-text tag="b">Bold</el-text>
                <el-text tag="i">Italic</el-text>
                <el-text>
                    This is
                    <el-text tag="sub" size="small">subscript</el-text>
                </el-text>
                <el-text>
                    This is
                    <el-text tag="sup" size="small">superscript</el-text>
                </el-text>
                <el-text tag="ins">Inserted</el-text>
                <el-text tag="del">Deleted</el-text>
                <el-text tag="mark">Marked</el-text>
            </el-space>

        </el-col>


    </el-row>
</template>
<style>
.el-row {
    margin-bottom: 20px;
    background-color: pink;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    background-color: black;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.mx-1 {
    margin-left: 5px;
}
</style>